<script setup>
import { testStore } from '@/stores/test';
const Counter = testStore();

//解构赋值
const { count } = Counter;

//解构赋值具有响应式特性
const { count: counts } = storeToRefs(Counter);

//同时变更多个值
const setAll = () => {
  Counter.$patch({
    count: 500,
    name: '同时改了count和name'
  });
};
</script>

<template>
  <div style="text-align: center" class="mt-10">
    <h1 class="mb-4">值不具记亿，刷新复位：{{ Counter.name }}</h1>
    <hr class="m-6" />
    以下具有记忆功能，刷新保持
    <div>不具响应式：{{ count }}</div>
    <div>具有响应式：{{ counts }}</div>
    <div>倍进调用一次：{{ Counter.doubleCount }}</div>
    <div>倍进调用二次：{{ Counter.doubleCount }}</div>
    <div>倍进加一调用一次：{{ Counter.doublePlusOne }}</div>
    <div class="mb-10">倍进加一调用二次：{{ Counter.doublePlusOne }}</div>
    <button @click="Counter.inc()">递增</button>
    <input type="text" style="text-align: center" readonly :value="Counter.count" />
    <button @click="Counter.cut()">递减</button>
    <hr />
    <div class="m-4">
      <button @click="Counter.zero()">复位</button>
      |
      <button @click="setAll()">同时改</button>
    </div>
  </div>
</template>
